<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <mycom3></mycom3>
    </div>

    <div id="app2">
      <mycom3></mycom3>
      <login></login>
    </div>

    <!-- 在 被Vue实例控制的 #app 外面 来 指定组件的控制区域,使用Vue提供的标签 template 元素,定义组件的HTML模板结构  -->
    <!-- 这里属于组件结构 必须符合组件的定义规则 只有唯一的根元素包裹 -->
    <template id="templ">
      <div>
        <h1>
          这是通过 template
          元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮
        </h1>
        <h3>好用,不错!</h3>
      </div>
    </template>

    <template id="templ2">
      <h1>这是私有的 login 组件</h1>
    </template>

    <script type="text/javascript">
      // 创建(定义)全局组件  组件的模版结构被抽离出来了放到template标签内部
      Vue.component("mycom3", {
        // 类似art-template中var htmlStr =  template('#tmpl', {模版数据})
        template: "#templ"
      });

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
      });

      var vm2 = new Vue({
        el: "#app2",
        data: {},
        methods: {},
        filters: {},
        directives: {},
        components: {
          // 定义实例内部私有组件的
          login: {
            template: "#templ2"
          }
        },

        beforeCreate() {},
        created() {},
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestory() {},
        destoryed() {}
      });
    </script>
  </body>
</html>
